<template>
	<div class="box">
		<router-link class="level makeLevel" :to="{ name: 'Make' }"
			>创建关卡</router-link
		>
		<div class="levelList">
			<router-link
				class="level"
				v-for="{ id, name } in LevelList"
				:key="id"
				:to="{ name: 'Game', params: { id } }"
				>{{ name }}</router-link
			>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GameLevel } from "@/paint/Setting";

/** 旋转关卡页面 */
@Component({
	name: "Choose"
})
export default class ChoosePage extends Vue {
	/** 关卡列表 */
	private get LevelList(): any[] {
		return GameLevel.map(({ name }, id) => ({ id, name }));
	}
}
</script>

<style lang="scss" scoped>
.box {
	text-align: center;
}
.level {
	margin: 20px 20px;
	padding: 5px;
	display: inline-block;
	min-width: 40px;
	min-height: 20px;
	text-decoration: none;
	font-size: 20px;
	border-radius: 5px;
	color: #000;
	background-color: #aaa;
}
.level:hover {
	background-color: #999;
}
.makeLevel {
	margin: 60px 0;
	font-size: 40px;
}
.levelList {
	margin-top: 20px;
}
</style>
